<template>
  <div>
    <!-- 复选框 -->
    <van-checkbox-group v-model="from.result" style="padding-bottom:60px;">
      <van-cell-group>
        <van-cell v-for="(item, $index) in list" clickable :key="$index" @click="numb(item, $index)" size="large">
          <van-checkbox :key="item.name" :name="item.id" ref="checkboxes" slot="right-icon" icon-size="14px"/>
          <span :class="item.status==1?'openColor':'closeColor'"> {{item.name}}</span>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>

    <!-- 底部按钮 -->
    <div class="bottom_btn">
      <van-row style="background:#fff">
        <van-col span="12">
          <van-button type="default" color="#08395A" @click="openStatus" :disabled="btnDisabled2" :hairline="true"  size="large">{{openclose}}</van-button>
        </van-col>
        <van-col span="12">
          <van-button type="primary" color="#08395A" :disabled="btnDisabled" to='/eidtbuildings' :hairline="true" size="large">编辑</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      openclose:'启用', //启用停用按钮切换
      selectVal:[],
      btnDisabled2:true, //启用/停用是否禁用
      btnDisabled: true, //编辑按钮是否禁用
      titleName: '',    //导航栏标题
      selects: true,   //全选反选变量
      //建筑 数据
      list: [
        // {id:1, name:'华荣大厦1'},
        // {id:2, name:'华荣大厦2'},
        // {id:3, name:'华荣大厦3'},
      ],
      from:{
         result:[],//选中数据
         projectVal: sessionStorage.getItem("ProID"),
      }
    }
  },
  methods:{
    // 判断按钮选中状态是否一致
    checkedStatus(){
      //判断按钮显示文字
      if(this.selectVal[0].status==2){
        this.openclose="启用";
      }else{
        this.openclose="停用";
      }
      
      let status = this.selectVal[0].status;
      this.btnDisabled2 = false;
      for(let target of this.selectVal) {
        if(target.status !== status) {
          this.btnDisabled2 = true;
          break;
        }
      }
      return this.btnDisabled2;
    },
    //启用\停用
    openStatus(){
      this.$dialog.confirm({
        title: '提示信息',
        message: `确定要${this.openclose}建筑信息吗？`
      }).then(() => {
        for (let i = 0; i < this.selectVal.length; i++) {
          this.OpenandClose(this.selectVal[i].id, this.selectVal[i].status); 
        }
      }).catch(() => {
      // on cancel
      });
    },

    OpenandClose(BuidIDs, StatusVal){
      let data = {
        id: parseInt(BuidIDs),
        status: parseInt(StatusVal) == 1 ? 2 : 1,
      } 
      this.$http.put("/api/buildings/status", data, {
          headers:{ 'Authorization':localStorage.getItem('token'),}
        }).then(res =>{
           if(res.data.errcode == 0){
             this.$router.go(0);
             this.$toast.success('操作成功！');
           }else{
             this.$toast.fail('操作失败！');
           }
      })
    },

    //获取建筑点数据
    getbuildList(){     
      this.$http.get(`/api/buildings/getBuildingsList?locationId=${this.from.projectVal}&limit=99&page=1`,{
        headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
        if(res.data.errcode == 0){
          res.data.data.list.forEach(el => {
            this.list.push(
              {
                name: el.name,
                id:el.id,
                description: el.description,
                mainphone: el.mainphone,
                buildingClassId: el.buildingClassId,
                buildingClass: el.buildingClass,
                status: el.status,
                locationId: el.locationId,
              });
          });
        }
      })
    },
    cancel(){
      this.$router.go(-1);//返回上一层
    },
    // 全选/反选
    select(){
      this.selects =! this.selects;
      if(this.selects != true){
       this.list.forEach(el =>{
        this.from.result.push(el.id); //全选添加数据
        this.selectVal.push({id: el.id, status: el.status});//全选添加数据
        this.btnDisabled = true;
        this.btnDisabled2 = true;
        this.titleName = `已选择${this.selectVal.length}个文件`
        this.checkedStatus();
        })
      }else{
        this.from.result = []; //反选清空数据
        this.selectVal = [];//反选清空数据
        this.titleName = ""
        this.titleName = `已选择${0}个文件`
      }
    },
    //计算勾选 建筑个数
    numb(val, index) {
      this.$refs.checkboxes[index].toggle();
      //选中的单挑数据存在 sessionStorage
      sessionStorage.setItem("buildID", val.id);  //建筑类别ID
      sessionStorage.setItem("buildVal", JSON.stringify(val));//选中的建筑信息
      //设置按钮是否禁选
      setTimeout(res =>{
        this.titleName = `已选择${this.from.result.length}个文件`;
        if(this.from.result.length == 1){
          this.btnDisabled = false;
          this.btnDisabled2 = false;
        }else{
          this.btnDisabled = true;
        }
         if(this.from.result.length == 0){
           this.btnDisabled2 = true;
         }
      },300);
      
      //选中 添加数据  取消删除勾选数据
      if(this.$refs.checkboxes[index].checked==false){
        this.selectVal.push({id: val.id, status: val.status});
        this.checkedStatus();
      }else{
        this.selectVal = this.removeByValue(this.selectVal, val.id);
        this.checkedStatus();
      }
      
    },
    //取消选中过滤 删除
  removeByValue(arr, val) {
    for(let i=0; i<arr.length; i++) {
      if(arr[i].id == val) {
        arr.splice(i, 1);
        return arr;
      }
    }
}
  },
  created(){
    this.getbuildList();
  }
}
</script>

<style>
  .van-ellipsis {
    font-weight: 600;
  }
 .van-dropdown-menu__title {
    color:#333;
    font-size: 35px;
    
  }
  .van-dropdown-menu__item {
    justify-content: flex-start;
    margin-left: 5px;
  }
  /* 添加建筑 */
  .addjianzhu{
    background: #fff;
    display: flex;
    font-size: 28px;
    justify-content:flex-end;
    align-items: center;
  }
  .van-cell__title{
    color: #323232;
    font-size: 33px;
    font-weight: bold;
  }
  /* 固定底部按钮 */
  .bottom_btn{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
  .openColor{
    color: #08395A;
    font-weight: 600;
    font-size: 32px;
  }
  .closeColor{
    color: #999;
    font-size: 32px;
  }
</style>